<!--
 * @Author: zhangzao
 * @Date: 2024-05-17 09:27:43
 * @LastEditors: zhangzao
 * @LastEditTime: 2024-05-17 10:41:56
 * @Description: 请填写简介
 * @FilePath: /zg-charge-admin/src/views/account/Dialogs/AddAccountDlg.vue
-->
<template>
  <CDialog
    :visible="visible"
    :title="title"
    type="add"
    width="630px"
    @submit="handleSubmit"
    @cancel="handleCancel"
    @outerOpen="outerOpen"
  >
    <div v-if="type === 'add' || type === 'edit'">
      <i-form
        :items="items"
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
      >
        <template slot="password">
          <el-form-item label="密码" prop="password">
            <DefaultPwd
              v-model="form.password"
              placeholder="请输入密码"
              default-pwd="user_123456"
            />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div v-if="type === 'delete'">你确定要删除用户 {{ form.userName }} 吗?</div>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { addAccount, editAccount, removeFZPerson } from '@/api/user'
import DefaultPwd from '@/components/DefaultPwd'
// import md5 from 'md5'
import formValidate from '@/utils/validate'

export default {
  name: 'addStaffDlg',
  components: { CDialog, DefaultPwd },
  props: {
    visible: {
      required: true,
      type: Boolean,
    },
    typeOptions: {
      type: Array,
      required: true,
    },
    type: {
      required: true,
      type: String,
    },
    selectStaff: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  mounted() {
    if (this.type === 'delete') {
      this.title = '删除用户'
      this.form = {
        ...this.selectStaff,
      }
      return
    }

    let items = [
      {
        label: '姓名',
        value: 'userName',
        type: 'text',
        showInForm: true,
        required: true,
      },
      {
        label: '手机号码',
        value: 'mobile',
        type: 'text',
        showInForm: true,
        required: true,
      },
      {
        slot: 'password',
        value: 'password',
        showInForm: true,
        required: true,
      },
    ]

    if (this.type === 'add') {
      this.title = '新增账号'
    } else if (this.type === 'edit') {
      this.title = '编辑账号'
      items[2].required = false
      this.form = {
        ...this.selectStaff,
      }
    }

    this.items = items.filter((item) => item.showInForm)
  },
  methods: {
    handleSubmit() {
      delete this.form.explanation

      if (this.type === 'add') {
        this.addCommit()
      } else if (this.type === 'edit') {
        this.editCommit()
      } else if (this.type === 'delete') {
        this.deleteCommit()
      }
    },
    deleteCommit() {
      removeFZPerson({
        id: this.form.id,
      })
        .then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '操作成功',
          })
          this.$emit('update:visible', false)
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    editCommit() {
      let validate = true
      this.$refs.form.validate((valid) => {
        if (!valid) validate = false
      })
      if (!validate || !this.form.id) return

      editAccount(this.form)
        .then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '操作成功',
          })
          this.$emit('update:visible', false)
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    addCommit() {
      let validate = true
      this.$refs.form.validate((valid) => {
        if (!valid) validate = false
      })

      if (!validate) return

      let params = {
        ...this.form,
      }

      console.log(params)
      addAccount(params)
        .then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '操作成功',
          })
          this.$emit('update:visible', false)
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    refresh() {
      this.$emit('refresh')
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    outerOpen() {},
  },
  data() {
    return {
      title: '新增账号',
      items: [],
      form: {},
      rules: {
        password: [
          {
            // required: true,
            message: '请输入密码',
          },
          {
            validator: formValidate('validatePassword'),
          },
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
          },
          {
            validator: formValidate('validateMobile'),
          },
        ],
      },
    }
  },
}
</script>
